<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;margin: 0;border: none;
			}
			.item{
				padding: 5px;float: left;
			}
			.item img{
				padding: 3px;width: 150px;border: 1px solid #ccc;
			}
		</style>
		<script type="text/javascript">
			onload = onresize = layout;
			function layout(){
				var items=document.getElementsByClassName("item");
				var winWidth=document.documentElement.clientWidth;
				var colmn=Math.floor( winWidth / items[0].offsetWidth );
				var heightArr=[];
				
				//
				for(var i=0;i<items.length;i++){
					//第一行的div
					if(i < colmn){
						items[i].style.position="static";
						heightArr.push(items[i].offsetHeight);
					}
					//第二行开始
					else{
						var minHeight=heightArr[0];
						var minColmn=0;
						for(var j=0;j<heightArr.length;j++){
							if(minHeight > heightArr[j]){
								minHeight=heightArr[j];
								minColmn=j;
							}
						}
						//
						items[i].style.position="absolute";
						items[i].style.left=items[minColmn].offsetLeft+"px";
						items[i].style.top=minHeight+"px";
						//将heightArr的第minColum列的总高度再增加当前加入的div的高度
						heightArr[minColmn] +=items[i].offsetHeight;
					}
				}
			}
			
			
		</script>
	</head>
	<body>
		<div class="item"><img src="../code/images/images1/img (1).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (2).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (3).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (4).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (5).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (6).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (7).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (8).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (9).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (10).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (11).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (12).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (13).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (14).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (15).jpg"/></div>
		<div class="item"><img src="../code/images/images1/img (16).jpg"/></div>
	</body>
</html>
